<template>
	<view>
		<view class="container">
			<uni-icons class="container-icons" type="plusempty" size="100" color="#666" />
			<view class="container-tip">人脸正面照</view>
			<uni-file-picker class="group-info_upload"  :imageStyles="imageStyles" limit="1" @select="selectY"
				@progress="progress" @success="success" @fail="fail">
			</uni-file-picker>
			<view class="image" v-if="flag ==1" >
				<image :src="personInfo.idheadPortrait" mode="aspectFill"></image>
			</view>
		</view> 
		<view class="container">
			<uni-icons class="container-icons" type="plusempty" size="100" color="#666" />
			<view class="container-tip">国徽面照</view>
			<uni-file-picker class="group-info_upload" :imageStyles="imageStyles" limit="1" @select="selectZ"
				@progress="progress" @success="success" @fail="fail">
			</uni-file-picker>
			<view class="image" v-if="flag2 ==1" >
				<image :src="personInfo.idheadPortrait2" mode="aspectFill"></image>
			</view>
		</view>

		<button class="submit" type="primary" @click="onSubmit">提交</button>

			<!-- 失败提示窗 -->
			<uni-popup ref="errorDialog" type="dialog">
				<uni-popup-dialog type="error" cancelText="关闭" confirmText="确定" title="提示" content="图片无法识别，请重新上传">
				</uni-popup-dialog>
			</uni-popup>

			<!-- 成功提示窗 -->
			<uni-popup ref="successDialog" type="dialog">
				<uni-popup-dialog type="success" cancelText="关闭" confirmText="确定" title="提示" content="校验通过">
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 自定义上传图片样式
				imageStyles: {
					width: 375,
					height: 238,
				},
				personInfo: {
					idheadPortrait:"",
					idheadPortrait2:"",
					idcardBackId:"",
					idcardFontId:""
				},
				flag:0,
				flag2:0,
				img : ""
			}
		},
		methods: {
			// 提交上传身份证图片校验
			onSubmit() {
				console.log("提交上传身份证图片校验");
				uni.showLoading({
					title: "正在加载",
				});
				setTimeout(() => {
					uni.hideLoading();
				}, 2000);
				
				debugger
				if(this.personInfo.idcardFontId == ""){
					uni.showModal({
						content: "请上传身份证正面照",
						showCancel: false
					});
				}else if (this.personInfo.idcardBackId == ""){
					uni.showModal({
						content: "请上传身份证国徽照",
						showCancel: false
					});
				}else{
					uni.navigateTo({
						url: "/pages/addLabor/laborInfo/laborInfo?personInfo="+JSON.stringify(this.personInfo)
					})
					
				}
				
				// 识别失败调用
				// this.$refs.errorDialog.open();
				// 识别成功调用
				// this.$refs.successDialog.open();
				
			},
			// 获取上传状态
			selectY(e) {
				console.log('选择文件：', e)
				uni.uploadFile({
					url: 'http://116.205.142.103:8808/labor/system/user/readIDCardOCR', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'frontIDCard',
					formData: {
						'user': 'test',
					},
					success: (res) => {
						if(res.statusCode == 200) {
							this.flag = 1
							this.personInfo = JSON.parse(res.data).data
							this.personInfo.idheadPortrait = e.tempFilePaths[0]
							this.personInfo.idcardBackId = ""
						 
							console.log(this.personInfo)
						}else{
							e.tempFilePaths = [],
							this.flag = 0
						}
					}
				});
				 
			},
			// 获取上传状态
			selectZ(e) {
				uni.uploadFile({
					url: 'http://116.205.142.103:8808/labor/system/user/readIDCardOCR', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'contraryIDCard',
					formData: {
						'user': 'test',
					},
					success: (res) => {
						if(res.statusCode == 200) {
							let jsonRes = JSON.parse(res.data).data
							debugger
							this.personInfo.idcardBackpath = jsonRes.idcardBackpath
							this.personInfo.idcardBackName = jsonRes.idcardBackName ;
							this.personInfo.idcardBackId = jsonRes.idcardBackId;
							this.personInfo.idheadPortrait2 = e.tempFilePaths[0]
							this.flag2 = 1
							console.log(this.personInfo)
						}else{
							e.tempFilePaths = [],
							this.flag = 0
						}
					}
				});
				console.log('选择文件：', e)
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 632rpx;
		height: 400rpx;
		border: 1rpx dashed #666;
		margin-bottom: 50rpx;
		text-align: center;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;

		.container-icons {
			position: absolute;
			top: 80rpx;
			left: 0;
			right: 0;
			margin: auto;
		}

		.container-tip {
			position: absolute;
			bottom: 20rpx;
			left: 0;
			right: 0;
			margin: auto;
		}

		.image {}
	}

	.submit {
		width: 600rpx;
		margin-top: 50rpx;
	}

	.group-info_upload {
		padding: 10px;
		padding-top: 0;
		width: 100%;
		height: 100%;
		background-color: red;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		// background-color: red;
	}
</style>
